<template>
  <div class="app-container">
    <el-form ref="form" :model="detailForm" label-width="120px">
      <el-card class="box-card">
        <div slot="header">
          <span>车辆信息</span>
        </div>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="车架号:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌/车型/车款:">
              <linkage-select @changeNode="linkageChange" style="width: 100%;" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="区域:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="公司名称:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产权方:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="车辆类型:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="配置:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="座位数:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="燃油类型:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牌照类型:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="新车/旧车:">
              <el-input v-model="detailForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="初次登记日期:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择初次登记日期">
              </el-date-picker>

            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="二手车登记日期:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择二手车登记日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>年检信息</span>

        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="实际开始时间:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择实际开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实际结束时间:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择实际结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年检到期日:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择年检到期日">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="8">
            <el-form-item label="线上/线下:">
              <el-date-picker v-model="detailForm.makerDate" value-format="yyyy-MM-dd" type="date" style="width: 100%;"
                placeholder="请选择线上/线下">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车管负责人:">
              <el-input v-model="detailForm.name" placeholder="请输入车管负责人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费用类型:">
              <el-input v-model="detailForm.name" placeholder="请输入车管负责人"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年检金额:">
              <el-input v-model="detailForm.name" placeholder="请输入年检金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="12">
            <el-form-item label="年检标识:">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年检发票:">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <div slot="header">
          <span>年检信息审批流程</span>

        </div>

      </el-card>
    </el-form>
  </div>
</template>
    
<script>

import { getInspectionDetails } from "@/api/njgl/inspectAnnuallyApi.js";
import { getToken } from "@/utils/auth";
import LinkageSelect from "../components/linkageSelect.vue";

export default {
  name: "InspectAnnuallyDetails",
  components: {
    LinkageSelect
  },
  computed: {

  },
  data() {
    return {
      imageUrl: "",
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],

      routeQuery: {},

      // 表单参数
      detailForm: {

      },

    };
  },
  watch: {


  },
  computed: {

  },
  created() {
    this.routeQuery = this.$route.query

    // this.getBrandNames()

  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'|| 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('图片只能是PNG,JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;

    },

    linkageChange(val) {

      if (val) {
        this.detailForm.brandName = val[0] ? val[0].name : ''
        this.detailForm.seriesName = val[1] ? val[1].name : ''
        this.detailForm.modelName = val[2] ? val[2].name : ''
      } else {
        this.detailForm.brandName = ""
        this.detailForm.seriesName = ""
        this.detailForm.modelName = ""
      }
      this.$forceUpdate()
    },
  }
};
</script>
    
  
<style lang="scss" scoped>
.box-card {
  font-size: 14px;
  margin-bottom: 20px;

  
 
}

::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  ::v-deep.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #347bd8;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  ::v-deep .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }
</style>